<script setup>
import { Operation } from '@element-plus/icons-vue'
</script>

<template>
  <el-table stripe>
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column
      prop="projectName"
      label="项目名"
      width="160"
    ></el-table-column>
    <el-table-column
      prop="classify"
      label="项目类别"
      width="100"
    ></el-table-column>
    <el-table-column prop="stringStatus" label="状态"></el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="250px"
    ></el-table-column>
    <el-table-column prop="total" label="人数"></el-table-column>
    <el-table-column label="操作" width="400" align="center" fixed="right">
      <!-- eslint-disable-next-line -->
      <template #default="scope">
        <el-button type="primary" round
          >详细信息<el-icon style="margin-left: 3px"><Operation /></el-icon
        ></el-button>
        <!-- eslint-disable-next-line   -->
        <el-popconfirm
          width="180"
          confirm-button-text="确认"
          cancel-button-text="取消"
          title="取消该项目为优秀么？"
        >
          <template #reference>
            <el-button type="danger" round
              >取消优秀 <el-icon style="margin-left: 3px"><CloseBold /></el-icon
            ></el-button>
          </template>
        </el-popconfirm>
        <!-- eslint-disable-next-line   -->
      </template>
    </el-table-column>
  </el-table>
  <el-dialog>
    <el-descriptions
      title="项目详细信息"
      direction="vertical"
      :column="3"
      border
    >
      <el-descriptions-item label="项目Id"></el-descriptions-item>
      <el-descriptions-item label="项目名称"></el-descriptions-item>
      <el-descriptions-item label="项目类别" span="1"></el-descriptions-item>
      <el-descriptions-item label="项目人数" :span="1" width="100px">
        <el-tag size="small"></el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="项目状态" span="1"></el-descriptions-item>
      <el-descriptions-item label="负责人" span="1"></el-descriptions-item>
      <el-descriptions-item label="项目介绍" :span="3"> </el-descriptions-item>
      <el-descriptions-item label="图片" style="height: 120px" span="3">
        <div style="width: 120px; margin: 0; float: left">
          <el-image
            style="height: 100px; width: 100px; float: left"
            :initial-index="0"
          />
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
